import React, {Component} from 'react';
import {Image, ScrollView, Text, TouchableOpacity, View} from 'react-native';
import {EMOTIONS_DATA, EMOTIONS_ZHCN} from "../face/datasource";
import {pxToDp} from "../utils/styleKits";

// 表情组件
class Emotions extends Component {
  static defaultProps = {
    isEmotions: false,  // 是否展示表情组件
    onPress: (emotionsZhCn, k)=>{},   // 通过onPress方法，将 表情符中文含义（emotionsZhCn）、k传给父组件
  };

  render() {
    let {isEmotions} = this.props;
    return (
      <ScrollView>
        <View style={{flexWrap:'wrap',flexDirection:'row'}}>
          {isEmotions ? this.showEmotions() : <></>}
        </View>
      </ScrollView>
    );
  }

  // 展示表情
  showEmotions = () => {
    let {onPress} = this.props;
    let emotionsList = [];
    for (let k in EMOTIONS_DATA) {
      emotionsList.push(
        <TouchableOpacity onPress={onPress.bind(this, EMOTIONS_ZHCN[k], k)}>
          <Image source={EMOTIONS_DATA[k]} key={k} style={{width: pxToDp(40),
            height:pxToDp(40),margin:pxToDp(5)}}/>
        </TouchableOpacity>
      )
    }
    return emotionsList
  };
}

export default Emotions;